<template>
    <div>
        <el-row type="flex" justify="center">
            <el-col :span="20" style="background-color: white;border-radius:4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);margin-bottom: 15px">
                <div style="margin: 20px;">
                    <h3 style="margin-bottom:25px" class="el-icon-star-off">选你所想</h3>
                    <el-form ref="form" :model="form" label-width="80px" style="margin-bottom: 30px">
                        <el-form-item label="动力类型">
                            <el-select v-model="form.powerType" placeholder="请选择动力类型">
                                <el-option v-for="(e,i) in choice.powerType" :label="e" :value="e" :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排量">
                            <el-select v-model="form.output" placeholder="请选择排量">
                                <el-option v-for="(e,i) in choice.output" :label="e" :value="e" :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车型">
                            <el-select v-model="form.type" placeholder="请选择车型">
                                <el-option v-for="(e,i) in choice.type" :label="e" :value="e" :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="变速箱">
                            <el-select v-model="form.auto" placeholder="请选择变速箱">
                                <el-option v-for="(e,i) in choice.auto" :label="e" :value="e" :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="座位数">
                            <el-select v-model="form.seat" placeholder="请选择座位数">
                                <el-option v-for="(e,i) in choice.seat" :label="e" :value="e" :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="价格区间">
                            <div class="block">
                                <span class="demonstration">单位(万元)</span>
                                <el-slider
                                        v-model="form.priceSection"
                                        :step="10"
                                        show-stops>
                                </el-slider>
                            </div>
                        </el-form-item>
                    </el-form>
                    <el-divider><i class="el-icon-s-promotion"></i></el-divider>
                    <el-table
                            :data="tableData"
                            style="width: 100%">

                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="车款名">
                                        <span>{{ props.row.subName }}</span>
                                    </el-form-item>
                                    <el-form-item label="车系名">
                                        <span>{{ props.row.name }}</span>
                                    </el-form-item>
                                    <el-form-item label="最高时速(km/h)">
                                        <span>{{ props.row.speed }}</span>
                                    </el-form-item>
                                    <el-form-item label="官方指导价(万元)">
                                        <span>{{ props.row.price }}</span>
                                    </el-form-item>
                                    <el-form-item label="上市时间">
                                        <span>{{ props.row.date }}</span>
                                    </el-form-item>
                                    <el-form-item label="排放标准">
                                        <span>{{ props.row.emissionStandrad }}</span>
                                    </el-form-item>
                                    <el-form-item label="品牌">
                                        <span>{{ props.row.brand }}</span>
                                    </el-form-item>
                                    <el-form-item label="动力类型">
                                        <span>{{ props.row.powerType }}</span>
                                    </el-form-item>
                                    <el-form-item label="排量(L)">
                                        <span>{{ props.row.output }}</span>
                                    </el-form-item>
                                    <el-form-item label="车型">
                                        <span>{{ props.row.type }}</span>
                                    </el-form-item>
                                    <el-form-item label="变速箱">
                                        <span>{{ props.row.auto }}</span>
                                    </el-form-item>
                                    <el-form-item label="座位数">
                                        <span>{{ props.row.seat }}</span>
                                    </el-form-item>
                                    <el-form-item label="综合油耗(L/100km)">
                                        <span>{{ props.row.oil }}</span>
                                    </el-form-item>
                                    <el-form-item label="提速所需时间(s,100km/h)">
                                        <span>{{ props.row.accelerationTime }}</span>
                                    </el-form-item>
                                    <el-form-item label="车系口碑分数">
                                        <span>{{ props.row.grade }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="车系名"
                                prop="name">
                        </el-table-column>
                        <el-table-column
                                label="车款名"
                                prop="subName">
                        </el-table-column>
                        <el-table-column
                                label="品牌"
                                prop="brand">
                        </el-table-column>
                        <el-table-column
                                label="变速箱(档位)"
                                prop="auto">
                        </el-table-column>
                        <el-table-column
                                label="官方指导价(万元)"
                                prop="price">
                        </el-table-column>
                    </el-table>
                </div>

            </el-col>
        </el-row>
        <el-row justify="center" type="flex">
            <el-col :span="10">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage"
                        :page-size="page.size"
                        layout="total, prev, pager, next"
                        :total="page.total" style="text-align: center">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                page: {
                    size: 20,//一页几条数据
                    total:100,//总共几条数据
                    currentPage:1,//当前第几页
                },
                form: {//提交表单
                    powerType: '',//string
                    output: '',//double
                    type: '',//string
                    auto: '',//string
                    seat: '',//integer
                    priceSection: 0,//integer
                },
                choice: {//选项表单
                    powerType: ["油", "电"],//string
                    output: [1.5, 2.0],//double
                    type: ["SUV", "MPV"],//string
                    auto: ["手动", "自动"],//string
                    seat: [4, 5, 6],//integer
                },
                tableData: [
                    {
                    subName: '6.0TGTW12敞篷版',//车款名
                    name: '欧陆',//车系名
                    speed: 333,   //最高时速
                    price: 346,//厂方指导价
                    date: '2020-07',//上市时间
                    emissionStandrad: '欧VI', //排放标准
                    speedSection: 34,//最高时速区间 前端直接提供固定选项
                    brand: '宾利欧陆',//品牌            HashSet<String>
                    powerType: '汽油机',//动力类型   HashSet<String>
                    output: 6,//排量          HashSet<Double>
                    type: '2门4座跑车',//车型            HashSet<String>
                    priceSection: 35,//价格区间 前端直接提供固定选项
                    auto: '双离合',//变速箱          HashSet<String>
                    seat: 4,//座位数          HashSet<Integer>
                    oil: 404,//百公里综合油耗  404进行排除
                    accelerationTime: 3.8,//提速至百公里时速所需时间
                    grade: 0,//车系口碑分数
                }],
            }
        },
        methods: {
            wrapForm() {//包装提交选项的表单
                let form = {'current':this.page.currentPage,...this.form};
                if (this.form.output == '') {
                    form.output = 0;
                }
                if (this.form.seat == '') {
                    form.seat = 0
                }
                if (this.form.priceSection != 0) {
                    form.priceSection = parseInt(form.priceSection / 10);
                }
                return form;
            },
            wrapTableData(list) {//包装呈现数据的表单
                list.forEach(e=>{
                    this.cas(e, 'speed', 0);
                    this.cas(e,'date','')
                    this.cas(e,'emissionStandrad','-')
                    this.cas(e,'powerType','-')
                    this.cas(e,'output',0)
                    this.cas(e,'type','-')
                    this.cas(e,'oil',404)
                    this.cas(e,'accelerationTime',0)
                    this.cas(e,'grade',0)
                })
                return list
            },
            wrapChoice(list) {
                list['output']=list['output'].map(e=>{
                    if (e == 0) {
                        return ''
                    }
                    return e;
                })
                list['seat']=list['seat'].map(e=>{
                    if (e == 0) {
                        return '';
                    }
                    return e;
                })
                return list;
            },
            cas(object,str, tagValue) {
                if (object[str] == tagValue) {
                    object[str]='----'
                }
            },

            getChoice() {

                this.$http({
                    method: 'get',
                    url: this.$http.adornUrl('/recom/getChoice'),
                    params: this.$http.adornParams(this.wrapForm()),
                }).then(form => {
                    console.log(form);
                    let data = form.data;
                    this.tableData = this.wrapTableData(data['list']);
                    this.page.total = data['total'];
                    this.choice=this.wrapChoice(data['usersubcarform']);
                })
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getChoice();
            }
        },
        mounted() {
            this.getChoice()
        },
        beforeRouteUpdate(to, from, next) {
            next();
            this.getChoice()
        },
        watch: {
            'form.powerType'(nv, ov) {
                this.getChoice()
            },
            'form.output'(nv, ov) {
                this.getChoice()
            },
            'form.type'(nv, ov) {
                this.getChoice()
            },
            'form.auto'(nv, ov) {
                this.getChoice()
            },
            'form.seat'(nv, ov) {
                this.getChoice()
            },
            'form.priceSection'(nv, ov) {
                this.getChoice()
            },


        },
    }
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 175px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>